<template>
	<view class="content">
		<uni-nav-bar left-icon="left" color="#4a87b6" title="设置" @clickLeft="back()" background-color="#efefef"/>	
		<view class="items" @click="toFeedBack()">反馈</view>
		<view class="items" @click="toInForm(1)">关于</view>
		<view class="items" @click="toInForm(2)">用户需知</view>
		<view class="items" @click="toInForm(3)">鸣谢</view>
		<view class="links">
			<view class="toLink" @click="toExterNal(1)">
				<image src="https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/csdn.png" mode="aspectFit"></image>
				博客
			</view>
			<view class="toLink" @click="toExterNal(2)">
				<image src="https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/BILIBILI.png" mode="aspectFit"></image>
				b站
			</view>
			<view class="toLink" @click="toExterNal(3)">
				<image src="https://mp-6f81e20c-45ed-420c-8b9c-c84e21bce18b.cdn.bspapp.com/icon/gitee.png" mode="aspectFit"></image>
				仓库
			</view>
		</view>
		<view class="version">
			V1.0
		</view>
		<view class="logout" @click="logout()">退出</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			back(){
				uni.navigateBack({
					delta: 1
				})
			},
			toFeedBack(){
				uni.navigateTo({
					url:"/pages/setting/feedBack"
				})
			},
			toInForm(page){
				uni.navigateTo({
					url:"/pages/setting/inform?page="+page
				})
			},
			toExterNal(page){
				if(page == 1){
					uni.navigateTo({
						url:"/pages/setting/toWeb?url=https://blog.csdn.net/qq_43293370"
					})
				}else if(page == 2){
					uni.navigateTo({
						url:"/pages/setting/toWeb?url=https://space.bilibili.com/8693918"
					})
				}else if(page == 3){
					uni.navigateTo({
						url:"/pages/setting/toWeb?url=3"
					})
				}
				
			},
			logout(){
				// 超过了十二小时，执行清除操作
				uni.clearStorageSync();
				console.log('数据清除成功');
				uni.reLaunch({
					url:"/pages/user/login"
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: $bg-gary;
		
		
	}
	.content{
		color: $grayTwo;
		.items{
			background-color: white;
			width: 90%;
			height: 6vh;
			border-radius: 20rpx;
			display: flex;
			padding-left: 20rpx;
			align-items: center;
			font-size: 2vh;
			margin: auto;
			margin-top: 20rpx;
		}
		.items:active{
			opacity: 0.6;
		}
		.links{
			display: flex;  
			flex-wrap: wrap;  
			justify-content: space-around;  
			align-items: center; 
			width: 100%;
			height: 10vh;
			font-size: 1.6vh;
			padding: 10rpx;
			
			.toLink{
				height:80%;
				width: 25%;
				margin: 20rpx;
				background-color: white;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;  // 设置 flex 方向为 column  
				  
				image{
					width: 80%;
					height: 30%;
					margin-bottom: 20rpx;
				}
			}
			.toLink:active{
				opacity: 0.6;
			}
			
		}
		.version{
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			font-size: 3.4vh;
			opacity: 0.6;
			margin-top: 50rpx;
		}
		.logout{
			width: 90%;
			height: 6vh;
			border-radius: 20rpx;
			background-color: white;
			margin: auto;
			font-size: 2.2vh;
			color: red;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 2%;
			left: 5%;  
		}
		.logout:active{
			opacity: 0.6;
		}
	}
</style>
